<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>鼠标移入移出可连续帧动画</title>
  <script src="../static/js/vue.global.js"></script>
  <style>
    .openapi{
      width: 160px;
      height: 160px;
      background-image: url('./openapi-icon.png');
      background-size: 160px;
      background-repeat: no-repeat;
      cursor: pointer;
      background-position-y: -3680px;
    }
    .ide{
      width: 160px;
      height: 160px;
      background-image: url('./ide-icon.png');
      background-size: 160px;
      background-repeat: no-repeat;
      cursor: pointer;
      background-position-y: -6240px;
    }
    .sdk{
      width: 160px;
      height: 160px;
      background-image: url('./sdk-icon.png');
      background-size: 160px;
      background-repeat: no-repeat;
      cursor: pointer;
      background-position-y: -6240px;
    }

    @keyframes move {
      from{
        background-position-y: -6240px;
      }
      to{
        background-position-y: 0;
      }
    }
    @keyframes move2 {
      from{
        background-position-y: 0px;
      }
      to{
        background-position-y:  -6240px;
      }
    }
  </style>
</head>
<body>
<div id="app" style="display: flex;">
  <div class="ide" :style="{backgroundPositionY: `${-6240 + ide.y * 160}px`}" @mouseenter="enter(39, 'ide')" @mouseleave="leave(39, 'ide')"></div>
  <div class="sdk" :style="{backgroundPositionY: `${-6240 + sdk.y * 160}px`}" @mouseenter="enter(39, 'sdk')" @mouseleave="leave(39, 'sdk')"></div>
  <div class="openapi" :style="{backgroundPositionY: `${-3680 + api.y * 160}px`}" @mouseenter="enter(23, 'api')" @mouseleave="leave(23, 'api')"></div>
</div>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        ide: {
          timer: null,
          y: 0
        },
        sdk: {
          timer: null,
          y: 0
        },
        api: {
          timer: null,
          y: 0
        }
      }
    },
    methods: {
      enter(step, mode) {
        this.clear(mode);
        if (this[mode].y >= step) return;
        this[mode].timer = setInterval(_ => {
          this[mode].y++;
          if (this[mode].y>=step) {
            this.clear(mode)
          }
        }, 1000 / step)
      },
      leave(step, mode) {
        this.clear(mode);
        if (this[mode].y <= 0) return;
        this[mode].timer = setInterval(_ => {
          this[mode].y--;
          if (this[mode].y<=0) {
            this.clear(mode)
          }
        }, 1000 / step)
      },
      clear(mode) {
        clearInterval(this[mode].timer);
        this[mode].timer = null;
      }
    }
  }).mount('#app')
</script>
</body>
</html>
